<template>
  <div>
    <Tabs :value="name" :animated="false" @on-click="tabChange($event)">
        <TabPane label="新闻分类" name="name0"></TabPane>
        <TabPane label="产品分类" name="name1"></TabPane>
        <TabPane label="用户分类" name="name2"></TabPane>
    </Tabs>
    <Tree :data="data" :render="renderContent"></Tree>  
    <Modal
        v-model="modal1"
        title="分类管理">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="Title" prop="title">
              <Input v-model="formValidate.title" placeholder="Enter title"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Form>
        <div slot="footer">            
        </div>
    </Modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        id:'',
        type:0,
        name:'name0',
        modal1: false,
        changeType:'',
        formValidate: {
          title: ''
        },
        ruleValidate: {
          title: [
              { required: true, message: 'The name cannot be empty', trigger: 'blur' }
          ]
        },
        data: [
          {
            title: '分类管理',
            expand: true,
            render: (h, { root, node, data }) => {
              return h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%"
                  }
                },
                [
                  h("span", [
                    h("Icon", {
                      props: {
                        type: "ios-folder-outline"
                      },
                      style: {
                        marginRight: "8px"
                      }
                    }),
                    h("span", data.title)
                  ]),
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        float: "right",
                        marginRight: "50px"
                      }
                    },
                    [
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "ios-plus-empty",
                          type: "primary"
                        }),
                        style: {
                          width: "52px"
                        },
                        on: {
                          click: () => {
                            this.add(data);
                          }
                        }
                      })
                    ]
                  )
                ]
              );
            },
            children: ''
          }
        ],
        buttonProps: {
          type: "ghost",
          size: "small"
        }
      };
    },
    methods: {
      renderContent(h, { root, node, data }) {
        return h(
          "span",
          {
            style: {
              display: "inline-block",
              width: "100%"
            }
          },
          [
            h("span", [
              h("Icon", {
                props: {
                  type: "ios-paper-outline"
                },
                style: {
                  marginRight: "8px"
                }
              }),
              h("span", data.title)
            ]),
            h(
              "span",
              {
                style: {
                  display: "inline-block",
                  float: "right",
                  marginRight: "32px"
                }
              },
              [
                h("Button", {
                  props: Object.assign({}, this.buttonProps, {
                    icon: "ios-plus-empty"
                  }),
                  style: {
                    marginRight: "8px"
                  },
                  on: {
                    click: () => {
                      this.add(data);
                    }
                  }
                }),
                h("Button", {
                  props: Object.assign({}, this.buttonProps, {
                    icon: "ios-minus-empty"
                  }),
                  style: {
                    marginRight: "8px"
                  },
                  on: {
                    click: () => {
                      this.remove(data);
                    }
                  }
                }),
                h("Button", {
                  props: Object.assign({}, this.buttonProps),
                  on: {
                    click: () => {
                      this.update(data);
                    }
                  }
                },'修改')
              ]
            )
          ]
        );
      },

      //增加
      add(data){              
        this.handleReset('formValidate');
        this.changeType='add';
        this.id=data._id;
        this.modal1=true;
      },

      //修改
      update(data){
        this.changeType='update';
        this.id=data._id;
        console.log(this);
        this.modal1=true;
        this.formValidate.title=data.title;
      },

      //删除
      remove(data) {
        this.$Modal.confirm({
          title: '确认删除',
          content: '是否确认删除？',
          onOk: () => {
            this.id=data._id;          
            this.axios.delete('http://localhost:3000/cate/data/'+this.id).then(res=>{
              this.getData();
            })
            this.$Message.info('删除成功！');
          },
          onCancel: () => {
            this.$Message.info('取消删除');
          }
        });        
      },
      
      //获取数据
      getData(){
        //console.log(this.type);
        this.axios.get(`http://localhost:3000/cate/list/${this.type}`).then(res=>{
          //console.log(res);
          this.data[0].children=res.data;
        })
      },

      //表单提交
      handleSubmit (name) {      
        this.$refs[name].validate((valid) => {
          //console.log(this.formValidate)
          if (valid) {  
            if(this.changeType=="add"){
              //console.log(this.id)
              var params=Object.assign(this.formValidate,{parentId:this.id,type:this.type});            
              this.axios.post('http://localhost:3000/cate/data',params).then(res=>{
                this.modal1=false;
                this.getData();
                this.$Message.success('添加成功!');
              });
            }else if(this.changeType=="update"){
              console.log(this.id); 
              delete this.formValidate.parentId; 
              console.log(this.formValidate)
              this.axios.put(`http://localhost:3000/cate/data/${this.id}`,this.formValidate).then(res=>{
                //console.log(res);
                this.modal1=false;
                this.getData();
                this.$Message.success('修改成功!');
              })
            }                  
          } else {
            this.$Message.error('Fail!');
          }
        })
      },

      //重置
      handleReset (name) {
        this.$refs[name].resetFields();
      },

      //tab选项卡
      tabChange(event){
        this.name=event;
        this.type=event.slice(-1);
        this.getData();
      }
    },
    created(){
      this.getData();
    }
  }
</script>